<style lang="less">
    @import './styles/menu.less';
</style>

<template>
    <div class="top-bar-menu">
        <top-menu :module-menu-list="moduleMenuList" :menu-theme="theme" @on-change="handleChange"></top-menu>
    </div>
</template>

<script>
    import topMenu from './components/topMenu.vue';
    import util from '@/libs/util';
    export default {
        name: 'topbarMenu',
        components: {
            topMenu
        },
        props: {
            moduleMenuList: {
                type: Array,
                required: true
            },
            theme: {
                type: String,
                default: 'light',
                validator (val) {
                    return util.oneOf(val, ['dark', 'light']);
                }
            }
        },
        computed: {

        },

        mounted () {

        },
        methods: {
            handleChange (name) {
                this.$emit('on-change', name);
            }
        }
    };
</script>
